<template>
  <div class="main">
    <el-card shadow="always" class="card">
      <el-divider content-position="left">第三步 上传正确代码</el-divider>
      <div class="header-container">
        <el-select v-model="selectedLanguage" @change="updateLanguage" class="select" size="default">
          <el-option
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value">
          </el-option>
        </el-select>
      </div>
      <el-divider/>
      <div ref="editContainer" class="code-editor"></div>
      <el-divider/>
      <el-button size="large" class="next3" type="primary" @click="submitForm">完成</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { getCurrentInstance,ref, onMounted, nextTick, computed } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import axios from "axios";
import { ElMessage } from "element-plus";
import router from '@/router';
import { useStore } from "vuex";
import { defineProps, defineEmits } from 'vue';

// 定义props
const props = defineProps({
  value: String
});

// 定义事件发射器
const emit = defineEmits(['update:value']);

// Vuex store 的使用
const store = useStore();
const problemId = computed(() => store.state.problemId);
const testGroupMongoId = computed(() => store.state.testGroupMongoId);
const testGroupId = computed(() => store.state.testGroupId);
const {proxy} = getCurrentInstance();

// Monaco Editor 全局环境配置
self.MonacoEnvironment = {
  getWorker() {
    return new JsonWorker();
  },
};

const selectedLanguage = ref('C++');
const showInput = ref(false);
const inputContent = ref('');
let monacoEditor = null;

// 初始化 Monaco Editor
onMounted(async () => {
  await nextTick();
  monacoEditor = monaco.editor.create(proxy.$refs.editContainer, {
    value: props.value || '',
    readOnly: false,
    language: selectedLanguage.value,
    theme: 'vs',
    selectOnLineNumbers: true,
    renderSideBySide: false,
  });

  monacoEditor.onDidChangeModelContent(() => {
    const currentValue = monacoEditor?.getValue();
    emit('update:value', currentValue);
  });
});

// 切换输入显示
const toggleInput = () => {
  showInput.value = !showInput.value;
};

// 提交表单
const submitForm = async () => {
  const language = selectedLanguage.value === "cpp" ? "C++" : selectedLanguage.value;
  const postData = {
    testGroupMongoId: testGroupMongoId.value,
    testGroupId: testGroupId.value,
    problemId: problemId.value,
    code: monacoEditor.getValue(),
    language: language
  };

  try {
    const response = await axios.post(`/oj/ProblemsGroup/problems/uploadCode`, postData);
    if (response.data.code !== 200) {
      ElMessage.error(response.data.msg);
    } else {
      await router.push('/student/oj/Manager');
    }
  } catch (error) {
    ElMessage.error('Network or server error');
  }
};

// 语言选项和更新函数
const options = [
  {label: "C++", value: 'C++'},
  {label: 'JavaScript', value: 'javascript'},
  {label: 'Python3', value: 'Python3'},
  {label: 'Java', value: 'java'}
];
const updateLanguage = () => {
  monaco.editor.setModelLanguage(monacoEditor.getModel(), selectedLanguage.value);
};
</script>


<style scoped>
.main {
  width: 100%;
  height: 100%;
  margin: 2.5vh auto;
}

.next3 {
  margin-top: 20px;
  margin-bottom: 20px;
  float: right;
}

.code-editor {
  height: 20vh;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.select {
  width: 100px;
}
</style>